<template>
  <a-modal
    v-model:visible="visible"
    title="修改密码"
    width="90%"
    :mask-closable="false"
    :modal-style="{ maxWidth: '420px' }"
    @close="close"
    @before-ok="save"
  >
    <a-form ref="FormRef" :model="form" :rules="rules" auto-label-width>
      <a-form-item label="原密码" field="oldPass">
        <a-input v-model.trim="form.oldPass" placeholder="请输入原密码" allow-clear :max-length="10"></a-input>
      </a-form-item>

      <a-form-item label="新密码" field="newPass">
        <a-input v-model.trim="form.newPass" placeholder="请输入新密码" allow-clear :max-length="10"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { FormInstance } from '@arco-design/web-vue'

const visible = ref(false)

const form = ref({
  oldPass: '',
  newPass: '',
})

const open = () => {
  visible.value = true
}

defineExpose({ open })

const rules: FormInstance['rules'] = {
  oldPass: [
    { required: true, message: '此为必填项' },
    { min: 3, max: 10, message: '长度在 3 - 10个字符' },
  ],
  newPass: [
    { required: true, message: '此为必填项' },
    { match: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '格式不对！只能英文开头，包含英文数字下划线' },
  ],
  status: [{ required: true }],
}
</script>

<style scoped lang="scss"></style>
